<template>

  <div>
        <el-button type="primary" @click="state.dialogFormVisible = true">创建新用户</el-button>
        <!-- <el-button type="success" @click="modifyPassword">修改密码</el-button> -->
        <el-button type="info" @click="renderAccessToken">生成访问令牌</el-button>
        
    
    <br>

    <el-table
        ref="multipleTableRef"
        :data="state.tableData"
        :border="true" 
        style="width: 100%"
        highlight-current-row
    >
        <!-- <el-table-column type="selection" width="55" /> -->

        <el-table-column property="name" label="用户名称" width="120" />
        <el-table-column property="loginName" label="登录名" />
        <el-table-column label="创建时间">
          <template #default="scope">{{ new Date(scope.row.createDate).toLocaleString() }}</template>
        </el-table-column>
        
    </el-table>

    <el-dialog v-model="state.dialogFormVisible" title="创建新用户" width="500" @close="dialogClose">
      <el-form :model="state.form">
        <el-form-item label="管理员名称" :label-width="state.formLabelWidth">
          <el-input v-model="state.form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="账号" :label-width="state.formLabelWidth">
          <el-input v-model="state.form.loginName" autocomplete="off" @input="filterInput2" />
        </el-form-item>
        <el-form-item label="密码" :label-width="state.formLabelWidth">
          <el-input v-model="state.form.password" autocomplete="off" type="password" show-password @input="filterInput" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClose">取消</el-button>
          <el-button type="primary" @click="saveLink">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 访问令牌 -->
    <el-dialog v-model="state.tokenDialogFormVisible" title="访问令牌" width="800">
      <el-form>
        <el-form-item label="clientId：" :label-width="state.formLabelWidth">
          <!-- <el-input v-model="state.form.name" autocomplete="off" /> -->
          <div>{{ state.clientId }}</div>
        </el-form-item>
        <el-form-item label="secret：" :label-width="state.formLabelWidth">
          <!-- <el-input v-model="state.form.loginName" autocomplete="off" /> -->
          <div>{{ state.secret }}</div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  
</template>
<script lang="ts" setup>

import { defineComponent,reactive, ref, toRefs , watchEffect , onMounted } from 'vue'
import { ElMessage , ElLoading , ElTable } from 'element-plus';
import { getUserList , addUserData , getAccessToken } from '@/axios/api'

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

let loading:any = null;
const openLoading = function(){
  loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
}
const closeLoading = function(){
  loading && loading.close();
}


const state = reactive({
    tableData: [
      // {
      //   userId:"", //人员ID
      //   certificateId:"", //账号ID
      //   name:"", //姓名
      //   state:"", //状态
      //   loginName:"", //账号
      //   password:"", //密码
      //   createDate:"", //创建时间
      //   modifyDate:"" //修改时间
      // }
    ],

    form :{
      name: '',
      loginName: '',
      password:""
    },
    dialogFormVisible:false,
    formLabelWidth:'140px',
    tokenDialogFormVisible:false,

    clientId:"",
    secret:""
})

const initTableData = function(){
  getUserList().then((res:any)=>{
    state.tableData = res.data.data;
  }).catch(err=>{
    ElMessage(err.message)
  })
}

onMounted(()=>{
  initTableData();
})

const dialogClose = function(){
    state.form.name = '';
    state.form.loginName = '';
    state.form.password = '';
    state.dialogFormVisible = false;
}
const filterInput = function(){
  state.form.password = state.form.password.replace(/[\u4e00-\u9fa5]/g, '');
}
const filterInput2 = function(){
  state.form.loginName = state.form.loginName.replace(/[^a-zA-Z0-9]/g, '');
}
const saveLink = function(){
  openLoading();
  addUserData(
    {
      name:state.form.name,
      loginName:state.form.loginName,
      password:state.form.password
    }
  ).then((res:any)=>{
    closeLoading();
    if(!res.data.data){
      ElMessage({
        message:'创建失败，请检查是否有重复账号。',
        type:'error'
      });
    }
    dialogClose();
    initTableData();
  }).catch(err=>{
    closeLoading();
    ElMessage(err.message);
  })
}

//生成访问令牌
const renderAccessToken = function(){
  openLoading();
  getAccessToken().then((res:any)=>{
    const data = res.data;
    closeLoading();
    state.clientId = data.data.clientId;
    state.secret = data.data.secret;
    state.tokenDialogFormVisible = true;
  }).catch(err=>{
    closeLoading();
    ElMessage(err.message);
  })
}

</script>
